<template>
    <div class="item">
<div class="zi" v-for="(v,i) in canshu" :key="i">
          <div :class="v.cla">
              <span :class="v.tit"></span>
          </div>
          <p class="title">{{v.title}}</p>
      </div>
    </div>
</template>

<script>
export default {
    props:{
        canshu:Array
    }
}
</script>

<style scoped>
.item{
        display:flex;
        width: 370px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .zi{
        width: 80px;
        text-align: center;
        float: left;
    }
    .pit{
        border-radius: 15px;
        line-height: 50px;
        font-size: 12px;
        height: 50px;
        margin: 10px;
        color: #fff;
    }
    .cla1{
        background-color:#ff814f;
    }
    .cla2{
        background-color:#609ef1;
    }
    .cla3{
        background-color:rgb(165, 101, 42);
    }
    .cla4{
        background-color:rgb(47, 241, 255);
    }
    .cla5{
        background-color:#450cca;
    }
    .cla6{
        background-color:rgb(47, 241, 255);
    }
    .cla7{
        background-color:#ffcd48;
    }
    .cla8{
        background-color:red;
    }
    /* .cla9{
        background-color:rgb(165, 101, 42);
    }
    .cla10{
        background-color:rgb(47, 241, 255);
    }
    .cla11{
        background-color:#ff814f;
    }
    .cla12{
        background-color:#609ef1;
    } */
    .title{
        font-size: 12px;
        color: #333;
    }
</style>